<template>
	<view class="">
		<u-popup mode="bottom" :show="show" round="16" :closeable="true" @close="close">
			<view class="goods-list">
				<view class="goods-title">所有商品</view>
				<scroll-view class="scroll-box" scroll-y lower-threshold="60">
					<view style="width: 100%;height: 100%">
                        <view class="scroll-list" v-for="(item, index) in list" :key="index" @tap="openUrl(item)">
                            <view class="scroll-left">
                                <image class="scroll-image" :src="item.productCover" mode="" />
                            </view>
                            <view class="scroll-right">
                                <text class="right-title u-line-1">{{ item.productName }}</text>
                                <view class="right-price">
                                    <text class="right-view-price"> ￥{{ item.price }} </text>
                                    <view class="right-view-image">
                                        <!-- <image :src="$staticPath('video/cart_video.png')" mode="" /> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view style="width: 100%;height: 20rpx"></view>
                    </view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Object,
				default: []
			},
			show: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {};
		},
		watch: {
			list(newVal) {
				console.log("watch更新")
				console.log(newVal)
				console.log(this.list)
				this.list = newVal
			}
		},
		onLoad() {
			console.log("this.list", this.list)
		},
		methods: {
			close() {
				this.$emit("close");
			},
			openUrl(item) {
				uni.navigateTo({
					url: '/pages/classify/goods/info/index?id=' + item.productId
				})
			}
		},
	};
</script>

<style>
	.goods-list {
		min-height: 60vh;
		height: 700rpx;
	}

	.goods-title {
		padding: 32rpx 0;
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
		text-align: center;
		margin-left: 30rpx;
	}

	.scroll-box {
        max-height: 640rpx;
	}

	.scroll-list {
		margin-bottom: 20rpx;
		border-bottom: 1rpx #ededed solid;
		display: flex;
		flex-direction: row;
	}

	.scroll-image {
		width: 140rpx;
		height: 140rpx;
		margin-left: 30rpx;
	}

	.scroll-right {
		padding: 0 20rpx;
	}

	.right-title {
        display: flex;
        flex: 1;
        width: 500rpx;
		font-size: 26rpx;
		color: #303133;
	}

	.right-price {
		padding-top: 20rpx;
		display: flex;
	}
	
	.right-view-price{
		font-size: 26rpx;
		color: rgba(245, 34, 45, 1);
	}
</style>